<template>
  <div class="clue_import">
    <dt-search ref="search" :labelWidth="100" :xl=6 :xlBtn='6'>
      <Button type="primary" style="margin-left: 8px" v-if="unlocking('0213040100')"
        @click="exportExcel()">导出Excel</Button>
    </dt-search>
    <dt-grid ref="table" page :onFetch='onFetch' />
  </div>
</template>

<script>
  import Column from './opt/column.js'
  import searchOpt from './opt/search'
  import clueImportMgr from '@/biz/customer/clueImport'

  export default {
    data() {
      return {
        info: {
          buildingId: '',
          batch: '',
          channel: '',
          companyIds: [],
          officeIds: [],
          orgIds: [],
          clueGen_Time: []
        },
        filterParams: {}
      }
    },
    methods: {
      importBtn() {
        this.$refs.importModal.show()
      },
      onFetch(data) {
        let params = {
          ...data,
          clueGenStartTime: this.info.clueGen_Time ? this.info.clueGen_Time[0] : '',
          clueGenEndTime: this.info.clueGen_Time ? this.info.clueGen_Time[1] : ''
        }
        this.filterParams = params
        return clueImportMgr.getImportedClueList(params).then(res => {
          res.list = res.records
          return res
        })
      },
      exportExcel() {
        let params = this.filterParams
        clueImportMgr.exportImportedClue(params)
      }
    },
    mounted() {
      this.$refs.table.init(this, new Column(this))
      this.$refs.search.init(this.$refs.table, new searchOpt(this), this.info)
      this.$refs.table.fetch()
    }
  }
</script>

<style>
  .clue_import {
    padding: 20px;
  }
</style>